<template>
	<view >
		<picker mode="date" fields="month" :value="month" @change="bindDateChange">
		<view class="margin-lr-sm use-area dflex-b" >
			<view class="dflex">
				<view class="iconfont icongouwuquan-02-01 margin-right ft-main"></view>
				<view class="uni-input">{{month}}</view>
			</view>
			<view class="iconfont iconjiantou-01 fs-sm"></view>
		</view>
		</picker>
		
		<view :class="[empty ? '' : 'padding-lr-sm']">
			<!-- 空白页 -->
			<use-empty v-if="empty" e-style="round" e-type="cart" :btn-tip="false" tip="无提现数据"></use-empty>
			
			<view class="padding bg-main border-radius margin-top-sm" v-for="(item, idx) in datas" :key="idx">
				<view class="dflex-b">
					<view>
						<view class="fwb">{{ $api.format(item.createTime) }}</view>
						<view  class="ft-dark fs-xxs">支付方式:{{item.payType?"三方支付":"余额支付"}}</view>
						<view  class="ft-dark fs-xxs">交易方式:{{item.tradeType?"提货":"寄存"}}</view>
					</view>
					<view class="dflex-c dflex-flow-c">
						<view class="">
							￥<text class="fwb">{{item.amount}}</text>
						</view>
						<view class="fs-xxs" :class="{ 'ft-base': item.status == 2 }">
							{{zidian[item.status]}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {pay_withdrawal_list} from "../../../js_sdk/apis/pay.js"
	export default {
		data() {
			return {
				empty: false,
				state: '',
				zidian:{
					1:"支付中",
					2:"支付成功",
					3:"支付失败",
					4:"已关闭"
				},
				month:this.$api.format(new Date(), 'yyyy-MM'),
				datas: []
			};
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			bindDateChange(e){
				// 对应操作
				this.month=e.detail.value
				this.loadData()
			},
			loadData() {
				pay_withdrawal_list({offset:1000,month:this.month}).then(res=>{
					console.log(res)
					this.datas=res.data&&res.data.content&&res.data.content.list
					this.empty = !(this.datas && this.datas.length > 0);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	/* 订单状态区 */
	.navbar-area {
		white-space: nowrap;
	}
	
	.state-area {
		height: 7vh;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	}
	
	.nav-item {
		flex: 1;
	
		&.active {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 0;
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
	
</style>
